<template>
  <Modal v-model="visible"
         @on-visible-change="onChangeVisible"
         title="巡检提醒"
         footer-hide
         :z-index="900">
    <div>
      <ul v-if="item.length>0">
        <li v-for="(items,index) in item"
            :key="index"
            class="item m-b-20">
          <div>{{index+1}}. {{items.facltypeitemname}}-{{items.faclname}}</div>
          <div>所属机构：{{items.facldeptname || '- -'}}</div>
          <div>维护单位：{{items.mtadeptname || '- -'}}</div>
          <div>责任人：{{items.principalname || '- -'}}
            <span v-if="items.remark">(电话：{{items.remark}})</span>
          </div>
          <div v-if="getInsType(items.insType)">巡检周期：每{{getInsType(items.insType)}}{{items.ins || 0}}次</div>
          <div class="address flex a-center cursor-pointer">
            位置：{{items.facladdrdetail}}
            <div class="m-l-10 address-btn"
                 @click.stop="onClickAddress(items)">查看位置</div>
          </div>
        </li>
      </ul>
    </div>
    <NewPositionDetailModal v-model="map"
                            :address="address"
                            :lng="lng"
                            :lat="lat">
      <div class="modal-cont-title">
        <div class="">
          位置信息
        </div>
        <img src="../../../../assets/new/new_close.png"
             class="cursor-pointer"
             @click.stop="map = false">
      </div>
    </NewPositionDetailModal>
  </Modal>
</template>

<script>
import NewPositionDetailModal from '../new/NewPositionDetailModal.vue'
export default {
  components: {
    NewPositionDetailModal
  },
  model: {
    prop: 'visible',
    event: 'onChange'
  },
  props: {
    visible: Boolean,
    item: Array
  },
  data () {
    return {
      address: '',
      lng: '',
      lat: '',
      map: false
    };
  },
  mounted () {
    this.init()
  },
  destroyed () {
  },
  methods: {
    init () {

    },
    getInsType (item) {
      let insType = ''
      switch (item) {
        case '0':
          insType = '周'
          break;
        case '1':
          insType = '月'
          break;
        case '2':
          insType = '年'
          break;
        default:
          break;
      }
      return insType
    },
    onClickAddress (item) {
      this.map = !this.map
      this.address = item.facladdrdetail
      this.lng = item.facladdr.split(',')[0]
      this.lat = item.facladdr.split(',')[1]
    },
    onChangeVisible (boo) {
      if (!boo) {
        this.resetData()
        this.$emit('onChange', false)
        this.$emit('update:dataId', '')
      }
    },
    resetData () {

    }
  },
}
</script>

<style lang='scss' scoped>
@import "@/scss/iviewCssReset/modal";
.item {
  color: #f6f6f6;
  font-size: 14px;
  line-height: 30px;
  div:not(:first-child) {
    padding-left: 14px;
  }
  .address {
    .address-btn {
      width: 70px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      border-radius: 4px;
      border: 1px solid #3eb0ff;
      color: #3eb0ff;
      background: rgba(62, 176, 255, 0.3);
    }
  }
}
.modal-cont-title {
  height: 77px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 50px 0 60px;

  img {
    width: 20px;
    height: 20px;
  }
}
</style>